<!--
 * @Author: your name
 * @Date: 2021-02-20 15:46:24
 * @LastEditTime: 2021-02-20 15:50:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demoe:\前端开发学习\hmtt\hm63-hmtt-wsh\src\views\home\main\searchList.vue
-->
<template>
  <div class="searchList">
    <navBar title="搜索列表" path="/home/search"></navBar>
    <div class="content" v-if="searchList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- @load="onLoad" -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 搜索列表item -->
          <div
            class="searchItem"
            v-for="(item, index) in searchList"
            :key="index"
            @click="goDetails(item.art_id)"
          >
            <div class="type3" v-if="item.cover.type === 3">
              <!-- 作者信息 -->
              <div class="authorInfo">
                <!-- 用户头像 -->
                <div class="leftInfo">
                  <img
                    src="https://i04piccdn.sogoucdn.com/c5625ec5ff7a46cc"
                    alt=""
                    class="avatar"
                  />
                </div>
                <div class="rightInfo">
                  <!-- 作者name -->
                  <div class="aut_name">
                    {{ item.aut_name }}
                  </div>
                  <!-- 发布日期 -->
                  <div class="pubdate">
                    {{ item.pubdate }}
                  </div>
                </div>
              </div>
              <!-- 标题和图片 -->
              <div class="contentBox">
                <div class="title van-ellipsis">
                  用supervisor实现进程守护,在一次退出时,用supervisor实现进程守护,在一次退出时
                </div>
                <div class="imagesBox">
                  <div
                    class="image"
                    v-for="(imgItem, imgIndex) in item.cover.images"
                    :key="imgIndex"
                  >
                    <img :src="imgItem" alt="" />
                  </div>
                </div>
              </div>
              <!-- 点赞数收藏数以及评论数 -->
              <div class="messageBox">
                <!-- 评论数 -->
                <div class="comm_count box">
                  <i class="iconfont icon-pinglun"></i
                  ><span class="count">{{ item.comm_count }}</span>
                </div>
                <!-- 点赞数 -->
                <div class="like_count box">
                  <i class="iconfont icon-dianzan"></i
                  ><span class="count">{{ item.like_count }}</span>
                </div>
                <!-- 收藏数 -->
                <div class="collect_count box">
                  <i class="iconfont icon-shoucang"></i
                  ><span class="count">{{ item.collect_count }}</span>
                </div>
              </div>
            </div>
            <div
              class="type1"
              v-if="item.cover.type === 1 || item.cover.type === 0"
            >
              <!-- 作者信息 -->
              <div class="authorInfo">
                <!-- 用户头像 -->
                <div class="leftInfo">
                  <img
                    src="https://i04piccdn.sogoucdn.com/c5625ec5ff7a46cc"
                    alt=""
                    class="avatar"
                  />
                </div>
                <div class="rightInfo">
                  <!-- 作者name -->
                  <div class="aut_name">
                    {{ item.aut_name }}
                  </div>
                  <!-- 发布日期 -->
                  <div class="pubdate">
                    {{ item.pubdate }}
                  </div>
                </div>
              </div>
              <!-- 标题和图片 -->
              <div class="contentBox">
                <div class="title">
                  <p class="van-multi-ellipsis--l2">
                    {{ item.title }}
                  </p>
                </div>
                <div class="imagesBox" v-if="item.cover.type === 1">
                  <div class="image">
                    <img :src="item.cover.images[0]" alt="" />
                  </div>
                </div>
              </div>
              <!-- 点赞数收藏数以及评论数 -->
              <div class="messageBox">
                <!-- 评论数 -->
                <div class="comm_count box">
                  <i class="iconfont icon-pinglun"></i
                  ><span class="count">{{ item.comm_count }}</span>
                </div>
                <!-- 点赞数 -->
                <div class="like_count box">
                  <i class="iconfont icon-dianzan"></i
                  ><span class="count">{{ item.like_count }}</span>
                </div>
                <!-- 收藏数 -->
                <div class="collect_count box">
                  <i class="iconfont icon-shoucang"></i
                  ><span class="count">{{ item.collect_count }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import navBar from '@/components/navBar.vue'
import { search } from '@/api/search.js'
export default {
  name: 'searchList',
  data () {
    return {
      loading: false,
      value: '',
      finished: false,
      searchList: [],
      page: 1,
      per_page: 10,
      total_count: '',
      refreshing: false,
      time: '',
      loadTime: ''
    }
  },
  components: {
    navBar
  },

  mounted () {
    // 页面创建时改变颜色
    document.body.style.backgroundColor = '#f9f9f9'
    this.value = this.$route.query.value
    // console.log(this.$route.query)
    this.searchVal()
  },
  methods: {
    // tiaoz
    // 发送搜索请求
    async searchVal () {
      const res = await search({
        q: this.value,
        page: this.page,
        per_page: this.per_page
      })
      console.log(res)
      // this.searchList = res.data.results
      this.total_count = res.data.total_count
      this.searchList.push(...res.data.results)
    },
    // 上拉加载
    onLoad () {
      clearTimeout(this.loadTime)
      this.loadTime = setTimeout(() => {
        this.page++
        this.searchVal()
        if (this.total_count === this.searchList.length) {
          this.finished = true
        }
        this.loading = false
      }, 1000)
    },
    // 下拉刷新
    onRefresh () {
      clearTimeout(this.time)
      this.time = setTimeout(() => {
        this.searchList = []
        this.page = 1
        this.searchVal()
        this.refreshing = false
      }, 1000)
    },
    // 点击跳转
    goDetails (id) {
      this.$router.push(`/home/main/details?art_id=${id}`)
    }
  },
  // 页面销毁之前恢复颜色
  beforeDestroy () {
    document.body.style.backgroundColor = '#fff'
  }
}
</script>
<style lang="less" scoped>
.searchList {
  .content {
    .searchItem {
      padding: @p15 @p15 0;
      margin-bottom: 12px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      .type3 {
        .authorInfo {
          height: 38px;
          display: flex;
          align-items: center;
          .leftInfo {
            border-radius: 50%;
            height: 37px;
            width: 37px;
            overflow: hidden;
            margin-right: 5px;
            .avatar {
              height: 100%;
              width: 100%;
            }
          }
          .rightInfo {
            .aut_name {
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: bold;
              font-stretch: normal;
              color: #222222;
              margin-bottom: 4px;
            }
            .pubdate {
              font-family: ArialMT;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #999999;
            }
          }
        }
        .contentBox {
          padding-bottom: 10px;
          .title {
            padding: 12px 0;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: 700;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #3a3a3a;
          }
          .imagesBox {
            display: flex;
            justify-content: space-between;
            .image {
              margin-right: 4px;
              width: 114px;
              height: 73px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .messageBox {
          display: flex;
          height: 48px;
          border-top: 1px solid #ececec;
          border-bottom: 1px solid #ececec;
          margin: 0 -15px;
          .box {
            flex: 1;
            border-right: 1px solid #ececec;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
              font-size: 18px;
              vertical-align: middle;
              margin-right: 5px;
            }
            .count {
              font-family: ArialMT;
              font-size: 15px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              color: #333333;
              vertical-align: middle;
            }
          }
          .box:last-child {
            border-right: none;
          }
        }
      }
      .type1 {
        .authorInfo {
          height: 38px;
          display: flex;
          align-items: center;
          .leftInfo {
            border-radius: 50%;
            height: 37px;
            width: 37px;
            overflow: hidden;
            margin-right: 5px;
            .avatar {
              height: 100%;
              width: 100%;
            }
          }
          .rightInfo {
            .aut_name {
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #222222;
              margin-bottom: 4px;
            }
            .pubdate {
              font-family: ArialMT;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #999999;
            }
          }
        }
        .contentBox {
          padding: 12px 0;
          display: flex;
          .title {
            flex: 1;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: 700;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #3a3a3a;
            margin-right: 10px;
          }
          .imagesBox {
            .image {
              width: 114px;
              height: 73px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .messageBox {
          display: flex;
          height: 48px;
          border-top: 1px solid #ececec;
          border-bottom: 1px solid #ececec;
          margin: 0 -15px;
          .box {
            flex: 1;
            border-right: 1px solid #ececec;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
              font-size: 18px;
              vertical-align: middle;
              margin-right: 5px;
            }
            .count {
              font-family: ArialMT;
              font-size: 15px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              color: #333333;
              vertical-align: middle;
            }
          }
          .box:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
